<template>
  <!--Dialog-->
  <Dialog v-model="modelValue">
    <el-form :status-icon="true" :model="updateForm" :inline="true" label-width="auto">
      <el-row>
        <el-col :span="24">
          <el-form-item label="所属组织">
            <OrganizationSelect
              v-model="updateForm.organizationId"
              placeholder="请选择所属组织"
              style="width: 256px"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="帐号">
            <el-input v-model="updateForm.userName" style="width: 256px" :disabled="true" />
          </el-form-item>
          <el-form-item label="姓" prop="surname">
            <el-input v-model="updateForm.surname" style="width: 256px" :disabled="true" />
          </el-form-item>
          <el-form-item label="名" prop="name">
            <el-input
              v-model="updateForm.name"
              maxlength="256"
              style="width: 256px"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="updateForm.email" style="width: 256px" :disabled="true" />
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="updateForm.phoneNumber" style="width: 256px" :disabled="true" />
          </el-form-item>
          <el-form-item label="是否活跃">
            <el-switch v-model="updateForm.isActive" :disabled="true" />
          </el-form-item>
          <el-form-item label="是否启用账户锁定">
            <el-switch v-model="updateForm.lockoutEnabled" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属角色">
            <RoleSelect :disabled="true" v-model="updateForm.roleNames" :min="1" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="onClose">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { OrganizationSelect } from '@/views/base/organization/select/index';
import { RoleSelect } from '@/views/base/role/select/index';
import { getAsync } from '@/utils/api/user/index';
import { Dialog } from '@/components/dialog/index';
import { propTypes } from '@/utils/propTypes';
import { ref, onMounted } from 'vue';
import type { UserUpdateDto } from '@/utils/api/user/type';

// id
const props = defineProps({
  id: propTypes.string
});

// 组件挂载完成
onMounted(async () => {
  const user = await getAsync(props.id);
  updateForm.value.userName = user.userName;
  updateForm.value.surname = user.surname;
  updateForm.value.name = user.name;
  if (user.organizationId) {
    updateForm.value.organizationId = user.organizationId;
  }
  updateForm.value.isActive = user.isActive;
  updateForm.value.lockoutEnabled = user.lockoutEnabled;
  updateForm.value.email = user.email;
  updateForm.value.phoneNumber = user.phoneNumber;
  updateForm.value.roleNames = user.roleNames;
});

// 控制组件隐藏与显示
const modelValue = defineModel<boolean>(propTypes.bool.def(false));
const close = () => {
  modelValue.value = false;
};

// 关闭
const onClose = () => {
  //触发自定义事件
  close();
};

// 修改对象
const updateForm = ref<UserUpdateDto>({
  userName: '',
  organizationId: '',
  email: '',
  phoneNumber: '',
  isActive: false,
  lockoutEnabled: false,
  roleNames: [],
  password: '',
  concurrencyStamp: ''
});
</script>
<style scoped lang="scss"></style>
